<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <!--    <link rel="stylesheet" type="text/css" href="assets/waifu.min.css?v=1.4.2"/>-->
  <link rel="stylesheet" type="text/css" href="css/mypetstore.css"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="imagetoolbar" content="no">

  <title>My PetStore</title>

  <style type="text/css">
    html {
      overflow: hidden;
    }
    body {
      margin: 0px;
      padding: 0px;
      background: whitesmoke;
      width: 100%;
      height: 100%;
    }
    #imageFlow {
      position: absolute;
      width: 100%;
      height: 80%;
      left: 0%;
      top: 10%;
      background: whitesmoke;
    }
    #imageFlow .diapo {
      position: absolute;
      left: -1000px;
      cursor: pointer;
      -ms-interpolation-mode: nearest-neighbor;
    }
    #imageFlow .link {
      border: dotted #fff 1px;
      margin-left: -1px;
      margin-bottom: -1px;
    }
    #imageFlow .bank {
      visibility: hidden;
    }
    #imageFlow .top {
      position: absolute;
      width: 100%;
      height: 40%;
      background: #181818;
    }
    #imageFlow .text {
      position: absolute;
      left: 0px;
      width: 100%;
      bottom: 16%;
      text-align: center;
      color: #FFF;
      font-family: verdana, arial, Helvetica, sans-serif;
      z-index: 1000;
    }
    #imageFlow .title {
      font-size: 0.9em;
      font-weight: bold;
    }
    #imageFlow .legend {
      font-size: 0.8em;
    }
    #imageFlow .scrollbar {
      position: absolute;
      left: 10%;
      bottom: 10%;
      width: 80%;
      height: 16px;
      z-index: 1000;
    }
    #imageFlow .track {
      position: absolute;
      left: 1%;
      width: 98%;
      height: 16px;
      filter: alpha(opacity=30);
      opacity: 0.3;
    }
    #imageFlow .arrow-left {
      position: absolute;
    }
    #imageFlow .arrow-right {
      position: absolute;
      right: 0px;
    }
    #imageFlow .bar {
      position: absolute;
      height: 16px;
      left: 25px;
    }
    #Content a, #Content a:visited, #Content a:link{
      color: #a0fcff;
      text-decoration: none;
      font-family: helvetica, tahoma, arial, verdana, sans-serif;
    }
    #Content a:hover{
      color: #69f;
    }
  </style>
  <script type="text/javascript">

    var imf = function () {
      var lf = 0;
      var instances = [];
      //定义一个通过class获得元素的方法
      function getElementsByClass (object, tag, className) {
        var o = object.getElementsByTagName(tag);
        for ( var i = 0, n = o.length, ret = []; i < n; i++)
          if (o[i].className == className) ret.push(o[i]);
        if (ret.length == 1) ret = ret[0];
        return ret;
      }
      function addEvent (o, e, f) {
        if (window.addEventListener) o.addEventListener(e, f, false);
        else if (window.attachEvent) r = o.attachEvent('on' + e, f);
      }
      function createReflexion (cont, img) {
        var flx = false;
        if (document.createElement("canvas").getContext) {
          flx = document.createElement("canvas");
          flx.width = img.width;
          flx.height = img.height;
          var context = flx.getContext("2d");
          context.translate(0, img.height);
          context.scale(1, -1);
          context.drawImage(img, 0, 0, img.width, img.height);
          context.globalCompositeOperation = "destination-out";
          var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
          gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
          gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
          context.fillStyle = gradient;
          context.fillRect(0, 0, img.width, img.height * 2);
        } else {
          /* ---- DXImageTransform ---- */
          flx     = document.createElement('img');
          flx.src = img.src;
          flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
                  'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
                  (img.height * .25) + ')';
        }
        /* ---- insert Reflexion ---- */
        flx.style.position = 'absolute';
        flx.style.left     = '-1000px';
        cont.appendChild(flx);
        return flx;
      }
      /* //////////// ==== ImageFlow Constructor ==== //////////// */
      function ImageFlow(oCont, size, zoom, border) {
        this.diapos     = [];
        this.scr        = false;
        this.size       = size;
        this.zoom       = zoom;
        this.bdw        = border;
        this.oCont      = oCont;
        this.oc         = document.getElementById(oCont);
        this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');
        this.text       = getElementsByClass(this.oc,   'div', 'text');
        this.title      = getElementsByClass(this.text, 'div', 'title');
        this.legend     = getElementsByClass(this.text, 'div', 'legend');
        this.bar        = getElementsByClass(this.oc,   'img', 'bar');
        this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');
        this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');
        this.bw         = this.bar.width;
        this.alw        = this.arL.width - 5;
        this.arw        = this.arR.width - 5;
        this.bar.parent = this.oc.parent  = this;
        this.arL.parent = this.arR.parent = this;
        this.view       = this.back       = -1;
        this.resize();
        this.oc.onselectstart = function () { return false; }
        /* ---- create images ---- */
        var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
        this.NF = img.length;
        for (var i = 0, o; o = img[i]; i++) {
          this.diapos[i] = new Diapo(this, i,
                  o.rel,
                  o.title || '- ' + i + ' -',
                  o.innerHTML || o.rel,
                  o.href || '',
                  o.target || '_self'
          );
        }
        /* ==== add mouse wheel events ==== */
        if (window.addEventListener)
          this.oc.addEventListener('DOMMouseScroll', function(e) {
            this.parent.scroll(-e.detail);
          }, false);
        else this.oc.onmousewheel = function () {
          this.parent.scroll(event.wheelDelta);
        }
        /* ==== scrollbar drag N drop ==== */
        this.bar.onmousedown = function (e) {
          if (!e) e = window.event;
          var scl = e.screenX - this.offsetLeft;
          var self = this.parent;
          /* ---- move bar ---- */
          this.parent.oc.onmousemove = function (e) {
            if (!e) e = window.event;
            self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
            self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
            if (self.view != self.back) self.calc();
            return false;
          }
          /* ---- release scrollbar ---- */
          this.parent.oc.onmouseup = function (e) {
            self.oc.onmousemove = null;
            return false;
          }
          return false;
        }
        /* ==== right arrow ==== */
        this.arR.onclick = this.arR.ondblclick = function () {
          if (this.parent.view < this.parent.NF - 1)
            this.parent.calc(1);
        }
        /* ==== Left arrow ==== */
        this.arL.onclick = this.arL.ondblclick = function () {
          if (this.parent.view > 0)
            this.parent.calc(-1);
        }
      }
      /* //////////// ==== ImageFlow prototype ==== //////////// */
      ImageFlow.prototype = {
        /* ==== targets ==== */
        calc : function (inc) {
          if (inc) this.view += inc;
          var tw = 0;
          var lw = 0;
          var o = this.diapos[this.view];
          if (o && o.loaded) {
            /* ---- reset ---- */
            var ob = this.diapos[this.back];
            if (ob && ob != o) {
              ob.img.className = 'diapo';
              ob.z1 = 1;
            }
            /* ---- update legend ---- */
            this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
            this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
            /* ---- update hyperlink ---- */
            if (o.url) {
              o.img.className = 'diapo link';
              window.status = 'hyperlink: ' + o.url;
            } else {
              o.img.className = 'diapo';
              window.status = '';
            }
            /* ---- calculate target sizes & positions ---- */
            o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
            var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
            var x = x0 + o.w1 + this.bdw;
            for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
              if (o.loaded) {
                o.x1 = x;
                o.w1 = (this.ht / o.r) * this.size;
                x   += o.w1 + this.bdw;
                tw  += o.w1 + this.bdw;
              }
            }
            x = x0 - this.bdw;
            for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
              if (o.loaded) {
                o.w1 = (this.ht / o.r) * this.size;
                o.x1 = x - o.w1;
                x   -= o.w1 + this.bdw;
                tw  += o.w1 + this.bdw;
                lw  += o.w1 + this.bdw;
              }
            }
            /* ---- move scrollbar ---- */
            if (!this.scr && tw) {
              var r = (this.ws - this.alw - this.arw - this.bw) / tw;
              this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
            }
            /* ---- save preview view ---- */
            this.back = this.view;
          }
        },
        /* ==== mousewheel scrolling ==== */
        scroll : function (sc) {
          if (sc < 0) {
            if (this.view < this.NF - 1) this.calc(1);
          } else {
            if (this.view > 0) this.calc(-1);
          }
        },
        /* ==== resize  ==== */
        resize : function () {
          this.wh = this.oc.clientWidth;
          this.ht = this.oc.clientHeight;
          this.ws = this.scrollbar.offsetWidth;
          this.calc();
          this.run(true);
        },
        /* ==== move all images  ==== */
        run : function (res) {
          var i = this.NF;
          while (i--) this.diapos[i].move(res);
        }
      }
      /* //////////// ==== Diapo Constructor ==== //////////// */
      Diapo = function (parent, N, src, title, text, url, target) {
        this.parent        = parent;
        this.loaded        = false;
        this.title         = title;
        this.text          = text;
        this.url           = url;
        this.target        = target;
        this.N             = N;
        this.img           = document.createElement('img');
        this.img.src       = src;
        this.img.parent    = this;
        this.img.className = 'diapo';
        this.x0            = this.parent.oc.clientWidth;
        this.x1            = this.x0;
        this.w0            = 0;
        this.w1            = 0;
        this.z1            = 1;
        this.img.parent    = this;
        this.img.onclick   = function() { this.parent.click(); }
        this.parent.oc.appendChild(this.img);
        /* ---- display external link ---- */
        if (url) {
          this.img.onmouseover = function () { this.className = 'diapo link';	}
          this.img.onmouseout  = function () { this.className = 'diapo'; }
        }
      }
      /* //////////// ==== Diapo prototype ==== //////////// */
      Diapo.prototype = {
        /* ==== HTML rendering ==== */
        move : function (res) {
          if (this.loaded) {
            var sx = this.x1 - this.x0;
            var sw = this.w1 - this.w0;
            if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
              /* ---- paint only when moving ---- */
              this.x0 += sx * .1;
              this.w0 += sw * .1;
              if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
                /* ---- paint only visible images ---- */
                this.visible = true;
                var o = this.img.style;
                var h = this.w0 * this.r;
                /* ---- diapo ---- */
                o.left   = Math.round(this.x0) + 'px';
                o.bottom = Math.floor(this.parent.ht * .25) + 'px';
                o.width  = Math.round(this.w0) + 'px';
                o.height = Math.round(h) + 'px';
                /* ---- reflexion ---- */
                if (this.flx) {
                  var o = this.flx.style;
                  o.left   = Math.round(this.x0) + 'px';
                  o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
                  o.width  = Math.round(this.w0) + 'px';
                  o.height = Math.round(h) + 'px';
                }
              } else {
                /* ---- disable invisible images ---- */
                if (this.visible) {
                  this.visible = false;
                  this.img.style.width = '0px';
                  if (this.flx) this.flx.style.width = '0px';
                }
              }
            }
          } else {
            /* ==== image onload ==== */
            if (this.img.complete && this.img.width) {
              /* ---- get size image ---- */
              this.iw     = this.img.width;
              this.ih     = this.img.height;
              this.r      = this.ih / this.iw;
              this.loaded = true;
              /* ---- create reflexion ---- */
              this.flx    = createReflexion(this.parent.oc, this.img);
              if (this.parent.view < 0) this.parent.view = this.N;
              this.parent.calc();
            }
          }
        },
        /* ==== diapo onclick ==== */
        click : function () {
          if (this.parent.view == this.N) {
            /* ---- click on zoomed diapo ---- */
            if (this.url) {
              /* ---- open hyperlink ---- */
              window.open(this.url, this.target);
            } else {
              /* ---- zoom in/out ---- */
              this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
              this.parent.calc();
            }
          } else {
            /* ---- select diapo ---- */
            this.parent.view = this.N;
            this.parent.calc();
          }
          return false;
        }
      }
      /* //////////// ==== public methods ==== //////////// */
      return {
        /* ==== initialize script ==== */
        create : function (div, size, zoom, border) {
          /* ---- instanciate imageFlow ---- */
          var load = function () {
            var loaded = false;
            var i = instances.length;
            while (i--) if (instances[i].oCont == div) loaded = true;
            if (!loaded) {
              /* ---- push new imageFlow instance ---- */
              instances.push(
                      new ImageFlow(div, size, zoom, border)
              );
              /* ---- init script (once) ---- */
              if (!imf.initialized) {
                imf.initialized = true;
                /* ---- window resize event ---- */
                addEvent(window, 'resize', function () {
                  var i = instances.length;
                  while (i--) instances[i].resize();
                });
                /* ---- stop drag N drop ---- */
                addEvent(document.getElementById(div), 'mouseout', function (e) {
                  if (!e) e = window.event;
                  var tg = e.relatedTarget || e.toElement;
                  if (tg && tg.tagName == 'HTML') {
                    var i = instances.length;
                    while (i--) instances[i].oc.onmousemove = null;
                  }
                  return false;
                });
                /* ---- set interval loop ---- */
                setInterval(function () {
                  var i = instances.length;
                  while (i--) instances[i].run();
                }, 16);
              }
            }
          }
          /* ---- window onload event ---- */
          addEvent(window, 'load', function () { load(); });
        }
      }
    }();

    /* ==== create imageFlow ==== */
    //          div ID    , size, zoom, border
    imf.create("imageFlow", 0.15, 1.5, 10);

  </script>
</head>

<body>

<div id="imageFlow">
  <div class="top">
    <div id="Content1" style="background-color: #181818;">
      <h2 style="color:#fff; text-align: center;" >Welcome to MypetStore</h2>

      <div style="text-align: center;"><a href="/catalog/view" >Enter the Store</a></div>

      <div style="color:#fff; text-align: center;"><sub>Copyright CSU </sub></div>
    </div>
  </div>
  <div class="bank">
    <a rel="images/1.jpg" title="BIRDS" href="#">
      My identity lies in not knowing who I am</a>
    <a rel="images/2.jpg" title="BIRDS" href="#">
      ...are made by not following instructions</a>
    <a rel="images/3.jpg" title="CATS" href="#">
      ...can come between us</a>
    <a rel="images/4.jpg" title="CATS" href="#">
      Here you come!</a>
    <a rel="images/5.jpg" title="DOGS" href="#">
      They don&#39;t know all the facts yet</a>

    <div class="text">
      <div class="title">
        Loading</div>
      <div class="legend">
        Please wait...</div>
    </div>
    <div class="scrollbar">
      <img class="track" src="images/track.jpg" alt="">
      <img class="arrow-left" src="images/sign_out.png" alt="">
      <img class="arrow-right" src="images/sign_in.png" alt="">
      <img class="bar" src="images/bar.jpg" alt="">
    </div>
  </div>
</body>
</html>